<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零点书喵--书籍详情</title>
    <link rel="stylesheet" href="css/description.css">
    <script>
        // 购物车增加数量按钮效果实现
        $(document).ready(function() {
            var t = $("#text-number");
            $('#min').attr('disabled', true);
            $("#add").click(function() {
                t.val(parseInt(t.val()) + 1)
                if (parseInt(t.val()) != 1) {
                    $('#min').attr('disabled', false);
                }
            })
            $("#min").click(function() {
                t.val(parseInt(t.val()) - 1);
                if (parseInt(t.val()) == 1) {
                    $('#min').attr('disabled', true);
                }
            })
        });
    </script>
</head>

<body>
    <!-- 整个商品详情也由一个大盒子包围 -->
    <div class="shop">
        <!-- 左边商品部分开始 -->
        <!-- 上面大盒子部分开始 -->
        <div class="box-top">
            <div id="showbox">
                <div class="showbox0">
                    <b>
                        <img src="#">
                    </b>
                    <span></span>
                </div>
                <p>
                    <img>
                </p>
            </div>
            <!-- 上面大盒子部分结束 -->
            <!--用于展示小图片的盒子开始-->
            <div id="smallbox">
                <!--展示图片里边-->
                <p>
                    <span></span>
                    <span></span>
                    <span class="sel"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>
                <div style="clear:both;width:100%;"></div>
            </div>
            <p class="showpage">
                <a href="javascript:void(0);" id="showleft"> &lt; </a>
                <a href="javascript:void(0);" id="showright"> &gt; </a>
            </p>
        </div>
        <!-- 左边商品部分结束 -->
        <!-- 中间文字内容部分开始 -->
        <div class="text-box">
            <div class="h-box">
                <h3>我是猫 夏目漱石</h3>
            </div>
            <div class="txt">
                <span class="price">￥<a href="#">599.00</a></span>
                <div class="cumulative">
                    <!-- cumulative这个单词是累计的意思 -->
                    <span class="number ty1 ">累计售出<br><em id="add_sell_num_363 ">370</em></span>
                    <span class="number tyu ">累计评价<br><em id="add_sell_num_363 ">25</em></span>
                </div>
            </div>
            <div class="type">
                <span class="type0">分类</span>
                <ul id="color" data-monitor="goodsdetails_fenlei_click ">
                    <li><a title="经典版" href="#">精装35g</a></li>
                    <li><a title="典藏版" href="#">礼品50g</a></li>
                </ul>
            </div>
            <div class="quantity">
                <span class="quantity0">数量</span>
                <input id="min" name=" " type="button" value="-" disabled="disabled">
                <input id="text-number" name=" " type="text " value="1" style="width:30px; text-align: center; color: #0F0F0F; ">
                <input id="add" name=" " type="button" value="+">
                <span class="number">库存（99）</span>
            </div>
            <div class="button-shop">
                <button class="button-shop left2"><img src="# " width="25 " height="25 ">加入购物车</button>
                <button class="button-shop right2"><img src="# " width="25 " height="25 ">立即购买</button>
            </div>
            <div class="guarantee">
                <span>邮费：包邮&nbsp;&nbsp;支持货到付款<a href="# "><img src="#"></a></span>
            </div>
        </div>
        <!-- 中间文字内容部分结束 -->
    </div>
</body>

</html>